<template>
  <div>
    <div class="tableDiv">
      <el-row style="margin-bottom:20px">
        <el-col :span="6">
          <div class="top-div">
            <el-input placeholder="请输入名称" prefix-icon="el-icon-search" v-model="input"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <el-input placeholder="请输入订单号" prefix-icon="el-icon-search" v-model="input2"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <el-select v-model="value" placeholder="订单状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <el-date-picker v-model="value1" type="date" placeholder="下单时间"></el-date-picker>
          </div>
        </el-col>
        <!-- <el-col :span="6">
          <div class="top-div right">
           
            <el-button type="primary" icon="el-icon-plus" size="small" @click="handleClick"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
          </div>
        </el-col>-->
      </el-row>

      <el-table :data="tableData" style="width: 100%;margin-top:20px" class="custom-table">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="a1" label="订单号" width="auto"></el-table-column>
        <el-table-column prop="a2" label="下单时间" width="auto"></el-table-column>
        <el-table-column prop="a3" label="订单状态" width="auto"></el-table-column>
        <el-table-column prop="a4" label="货物数量" width="auto"></el-table-column>
        <el-table-column prop="a5" label="存放位置" width="auto"></el-table-column>
        <el-table-column prop="a6" label="运输单号" width="auto"></el-table-column>
        <el-table-column prop="a7" label="运输方式" width="auto"></el-table-column>
        <el-table-column prop="a8" label="运输状态" width="auto"></el-table-column>
        <el-table-column prop="a9" label="预计到达时间" width="150px"></el-table-column>
        <el-table-column prop="a10" label="客户编号" width="auto"></el-table-column>
        <el-table-column prop="a11" label="客户联系方式" width="150px"></el-table-column>
        <el-table-column prop="a12" label="客户地址" width="auto"></el-table-column>
        <el-table-column prop="a13" label="供应商编号" width="120px"></el-table-column>
        <el-table-column prop="a14" label="供应商联系方式" width="150px"></el-table-column>

        <el-table-column prop="h" label="备注" width="auto"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="handleClick">编辑</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="添加" :visible.sync="dialogVisible" width="600px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="70px">
            <el-form-item label="订单号">
              <el-input v-model="formInline.user1" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="规格">
              <el-input v-model="formInline.user2" placeholder="规格"></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="formInline.user3" placeholder="数量"></el-input>
            </el-form-item>
            <el-form-item label="金额">
              <el-input v-model="formInline.user4" placeholder="金额"></el-input>
            </el-form-item>
            <el-form-item label="商品编码">
              <el-input v-model="formInline.user5" placeholder="商品编码"></el-input>
              <!-- <el-date-picker v-model="formInline.user5" type="date" placeholder="选择日期"></el-date-picker> -->
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="formInline.user6" placeholder="商品名称"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      title: "",
      tableData: [
        {
          a1: "Z255782425",
          a2: "2024-04-23",
          a3: "运输中",
          a4: "922",
          a5: "1号仓库48号货架",
          a6: "256686219",
          a7: "短途",
          a8: "正常",
          a9: "2024-04-27",
          a10: "25835",
          a11: "17044815522",
          a12: "吉林省吉林市",
          a13:"25835",
          a14: "17044815522",
        },
        {
          a1: "Z842751322",
          a2: "2024-05-16",
          a3: "已送达",
          a4: "6500",
          a5: "1号仓库5号货架",
          a6: "843227541",
          a7: "短途",
          a8: "正常",
          a9: "2024-04-27",
          a10: "25835",
          a11: "13694665388",
          a12: "宁夏省银川市",
          a13:"25835",
          a14: "17044815522",
        },
         {
          a1: "Y524855773",
          a2: "2024-05-30",
          a3: "已送达",
          a4: "6500",
          a5: "1号仓库43号货架",
          a6: "159962475",
          a7: "短途",
          a8: "正常",
          a9: "2024-06-07",
          a10: "661254",
          a11: "18088966686",
          a12: "四川省成都市",
          a13:"661254",
          a14: "18088966686",
        },
         {
          a1: "Z525463121",
          a2: "2024-08-28",
          a3: "已送达",
          a4: "600",
          a5: "6号仓库8号货架",
          a6: "526322856",
          a7: "短途",
          a8: "正常",
          a9: "2024-09-03",
          a10: "526635",
          a11: "18643668866",
          a12: "吉林省长春市",
          a13:"661254",
          a14: "18088966686",
        },
         {
          a1: "Z233256287",
          a2: "2024-08-24",
          a3: "已送达",
          a4: "600",
          a5: "12号仓库3号货架",
          a6: "526322856",
          a7: "短途",
          a8: "正常",
          a9: "2024-08-25",
          a10: "526635",
          a11: "18343661324",
          a12: "吉林省白城市",
          a13:"652534",
          a14: "18343661324",
        },
         {
          a1: "Z662745584",
          a2: "2024-08-24",
          a3: "已送达",
          a4: "200",
          a5: "1号仓库3号货架",
          a6: "526322856",
          a7: "长途",
          a8: "正常",
          a9: "2024-08-25",
          a10: "526635",
          a11: "13404407866",
          a12: "湖南省长沙市",
          a13:"652534",
          a14: "13404407866",
        },
         {
          a1: "Z683325811",
          a2: "2024-10-13",
          a3: "已送达",
          a4: "200",
          a5: "8号仓库16号货架",
          a6: "526322856",
          a7: "长途",
          a8: "正常",
          a9: "2024-08-25",
          a10: "526635",
          a11: "13404407866",
          a12: "云南省昆明市",
          a13:"483225",
          a14: "13404407866",
        },
       
      ],
      input: "",
      input2: "",
      formInline: {
        user1: "",
        user2: "",
        user3: "",
        user4: "",
        user5: "",
        user6: "",
        region: ""
      },
      options: [
        {
          value: "运输中",
          label: "运输中"
        },
        {
          value: "已送达",
          label: "已送达"
        }
        // {
        //   value: "选项3",
        //   label: "食品"
        // },
        // {
        //   value: "选项4",
        //   label: "文具"
        // }
      ],
      value: "",
      value1: ""
    };
  },
  methods: {
    handleClick(data) {
      this.title = data;
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 98%;
  background-color: #fff;
}
.right {
  /* padding-top: 4px; */
  line-height: 32px;
}
.tableDiv {
  background-color: #fff;
  /* margin-top: 20px; */
  padding: 20px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}

.img-circle {
  width: 50px; /* 设置图片宽度 */
  height: 50px; /* 设置图片高度，与宽度相等 */
  border-radius: 50%; /* 设置四个角为圆角 */
  object-fit: cover; /* 确保图片内容适合容器大小 */
  vertical-align: middle;
  margin-right: 20px;
}
/deep/ .el-select {
  width: 100%;
  height: 42px;
}
/deep/ .el-date-editor {
  width: 100%;
}
/deep/ .el-input__inner {
  height: 32px;
}
/deep/ .el-input__icon {
  line-height: 32px;
}
</style>


